<template>
  <view class="huangLi_box" v-if="!this.$_.isEmpty(this.dayDetail)">
    <view class="holiday_title">
      <view
        class="title_left center"
        style="border-radius: 12rpx 0rpx 0rpx 0rpx; flex: 1; height: 56rpx"
      >
        月名
      </view>
      <view class="title_left center" style="flex: 1; height: 56rpx">
        月相
      </view>
      <view
        class="title_left center"
        style="flex: 1; height: 56rpx; border-radius: 0rpx 12rpx 0rpx 0rpx"
      >
        月物候
      </view>
    </view>
    <view class="holiday_title">
      <view
        class="title_detail center"
        style="flex: 1; border-left: 2rpx solid #ca4336"
      >
        {{ dayDetail.yueName }}
      </view>
      <view class="title_detail center" style="flex: 1">
        {{ dayDetail.yueXiang }}
      </view>
      <view class="title_detail center" style="flex: 1">
        {{ dayDetail.wuHou }}
      </view>
    </view>

    <view class="holiday_box">
      <view class="holiday_title">
        <view class="title_left center" style="width: 227rpx"> 财神位 </view>
        <view class="box_right">
          <view
            style="border-bottom: none; width: 49.5%; border-top: none"
            class="title_detail center"
          >
            喜神
          </view>
          <view
            style="border-bottom: none; width: 49.5%; border-top: none"
            class="title_detail center"
          >
            {{ dayDetail.dayPositionXiDesc }}
          </view>
          <view
            style="border-bottom: none; width: 49.5%"
            class="title_detail center"
          >
            财神
          </view>
          <view
            style="border-bottom: none; width: 49.5%"
            class="title_detail center"
          >
            {{ dayDetail.dayPositionCaiDesc }}
          </view>
          <view
            style="
              border-bottom: none;
              width: 49.5%;
              border-bottom: 2rpx solid #ca4336;
            "
            class="title_detail center"
          >
            福神
          </view>
          <view
            style="
              border-bottom: none;
              width: 49.5%;
              border-bottom: 2rpx solid #ca4336;
            "
            class="title_detail center"
          >
            {{ dayDetail.dayPositionFuDesc }}
          </view>
        </view>
      </view>
    </view>

    <view class="holiday_box">
      <view class="holiday_title">
        <view class="title_left center" style="width: 227rpx"> 阴阳贵神 </view>
        <view class="box_right">
          <view
            style="border-bottom: none; width: 49.5%; border-top: none"
            class="title_detail center"
          >
            阳贵神
          </view>
          <view
            style="border-bottom: none; width: 49.5%; border-top: none"
            class="title_detail center"
          >
            {{ dayDetail.dayPositionYinGuiDesc }}
          </view>
          <view
            style="
              border-bottom: none;
              width: 49.5%;
              border-bottom: 2rpx solid #ca4336;
            "
            class="title_detail center"
          >
            阴贵神
          </view>
          <view
            style="
              border-bottom: none;
              width: 49.5%;
              border-bottom: 2rpx solid #ca4336;
            "
            class="title_detail center"
          >
            {{ dayDetail.dayPositionYangGuiDesc }}
          </view>
        </view>
      </view>
      <view class="holiday_title">
        <view class="title_left center" style="width: 227rpx"> 岁煞 </view>
        <view class="title_detail center" style="flex: 1; border-top: none">
          {{ dayDetail.daySha }}
        </view>
      </view>
      <view class="holiday_title">
        <view class="title_left center" style="width: 227rpx"> 六曜 </view>
        <view class="title_detail center" style="flex: 1; border-top: none">
          {{ dayDetail.liuYao }}
        </view>
      </view>
      <view class="holiday_title">
        <view class="title_left center" style="width: 227rpx"> 日禄 </view>
        <view class="title_detail center" style="flex: 1; border-top: none">
          {{ dayDetail.dayLu }}
        </view>
      </view>

      <view class="holiday_box">
        <view class="holiday_title">
          <view class="title_left center" style="width: 227rpx">
            空亡所值
          </view>
          <view class="box_right" style="flex: 1">
            <view
              style="border-bottom: none; width: 49.5%; border-top: none"
              class="title_detail center"
            >
              年
            </view>
            <view
              style="border-bottom: none; width: 49.5%; border-top: none"
              class="title_detail center"
            >
              {{ dayDetail.yearXunKong }}
            </view>
            <view
              style="border-bottom: none; width: 49.5%"
              class="title_detail center"
            >
              月
            </view>
            <view
              style="border-bottom: none; width: 49.5%"
              class="title_detail center"
            >
              {{ dayDetail.monthXunKong }}
            </view>
            <view
              style="border-bottom: none; width: 49.5%"
              class="title_detail center"
            >
              日
            </view>
            <view
              style="border-bottom: none; width: 49.5%"
              class="title_detail center"
            >
              {{ dayDetail.dayXunKong }}
            </view>
          </view>
        </view>
      </view>

      <view class="holiday_title">
        <view class="title_left center" style="flex: 1; height: 56rpx">
          九宫飞星
        </view>
      </view>

      <view class="holiday_title">
        <view
          class="title_detail center"
          style="flex: 1; border-left: 2rpx solid #ca4336; border-top: none"
        >
          九星
        </view>
        <view class="title_detail center" style="flex: 1; border-top: none">
          {{`${dayDetail.dayNineStar.number}${dayDetail.dayNineStar.color}${dayDetail.dayNineStar.wuXing}${dayDetail.dayNineStar.nameInBeiDou} `,}}
        </view>
        <view class="title_detail center" style="flex: 1; border-top: none">
          二十八宿
        </view>
        <view class="title_detail center" style="flex: 1; border-top: none">
          {{  dayDetail.xingXiu, }}
        </view>
      </view>

      <view class="holiday_title">
        <view
          class="title_detail center"
          style="
            flex: 1;
            height: 93rpx;
            border-left: 2rpx solid #ca4336;
            border-radius: 0rpx 0rpx 12rpx 12rpx;
            border-top: none;
          "
        >
          <view style="width: 100%; text-align: center; font-size: 24rpx"
            >一龙治水二日得金
          </view>
          <view>七人分饼十牛耕田</view>
        </view>
      </view>
    </view>
  </view>
</template>
  
  <script>
export default {
  props: {
    dayDetail: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    getText() {
      return function (item) {
        if (item) {
          //返回前6位
          return item.slice(0, 6);
        }
      };
    },
    getWuXing() {
      return function (item) {
        if (item) {
          //取后3位
          return item.substr(-3);
        }
      };
    },

    getPengZu() {
      return function (item) {
        if (item) {
          //取item的后8位

          return [item.slice(0, 8), item.substr(-8)];
        }
      };
    },
  },
  methods: {
    changeDay(e) {
      this.$emit("changeDate", e === "pre" ? "pre" : "next");
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.huang_middle {
  flex: 1;
  background: #ca4336;
  color: #fff;
  padding: 57rpx 0;
}
.huang_right {
  width: 162rpx;
}
.day_data {
  display: flex;
  justify-content: center;
  font-size: 38rpx;
  color: #ffffff;
  padding-top: 30rpx;
}
.option_box {
  margin-top: 66rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 57rpx;
    height: 84rpx;
  }
  .today_text {
    font-size: 162rpx;
    // font-weight: bold;
    color: #ffffff;
  }
}
.data_yin {
  font-size: 38rpx;
  text-align: center;
  color: #ffffff;
  padding-top: 66rpx;
}
.data_center {
  font-size: 38rpx;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.holiday_title {
  display: flex;
  font-size: 24rpx;
  //   font-weight: bold;
  color: #ffffff;
}
.title_left {
  width: 169rpx;
  // height: 56rpx;
  background: #ca4336;
  border: 1px solid #e5e5e5;
  // border-radius: 12rpx 0rpx 0rpx 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.detail_item {
  margin-left: 12rpx;
  flex-shrink: 0;
}
.title_detail {
  flex: 1;
  font-size: 24rpx;
  color: #262626;
  border: 1px solid #ca4336;
  border-left: none;
  display: flex;
  flex-wrap: wrap;
  padding: 12rpx 0;
}
.title_right {
  flex: 1;
  background: #ca4336;
}
.icon-yi {
  width: 46rpx;
  height: 47rpx;
}
.time {
  font-size: 15rpx;
  font-weight: normal;
}

.box_right {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  .title_detail {
    width: 172rpx;
    flex: none;
  }
}
.detail_item {
  margin-left: 12rpx;
}
</style>